<template>
	<view class="container" v-show="hideModal">
		<view class="mask" @touchmove.stop.prevent @click="close()"></view>
		<view class="content bottom-pos" :animation="animationData" @touchmove.stop.prevent>
			<view class="dec" @click="close()" style="height: 400px;">
				<view class="" style="display: flex;flex-direction: column;width: 100%;padding-top: 10px;">
					<view class="" style="display: flex;flex-direction: row;align-items: center;">
						<image src="../../static/indexbtnsel.png" style="width: 15px;height: 15px;margin-right: 10px;"
							mode=""></image>
						<text
							style="color: royalblue;font-size: 12px;font-weight: 500;">恭喜您！您已经通过{{item.productName}}初审</text>
					</view>
					<view class=""
						style="background-image:linear-gradient(to right ,royalblue 1%,#ffffff); display: flex;flex-direction: column;height: 80px;border-radius: 10px;align-items: flex-start;justify-content: space-evenly;padding-left: 20px;">
						<text style="color: #ffffff;font-weight: 800;font-size: 20px;">￥30,000</text>
						<view class="" style="display: flex;flex-direction: row; align-items: center;">
							<image style="width: 25px;height: 25px;border-radius: 8px;margin-right: 10px;"
								:src="item.logoUrl" mode=""></image>
							<text
								style="font-size: 14px;font-weight: 500;color: #ffffff;">额度由{{item.productName}}提供</text>

						</view>

					</view>
					<view class="" style="display: flex;flex-direction: row;justify-content: space-between;">
						<text style="color: darkgrey;font-size: 12px;font-weight: 500;">订单号</text>
						<text
							style="color: black;font-size: 12px;font-weight: 500;">{{randomRange(100000000000000,999999999999999)}}</text>

					</view>
					<view class="" style="display: flex;flex-direction: row;justify-content: space-between;">
						<text style="color: darkgrey;font-size: 12px;font-weight: 500;">货款期数</text>
						<text style="color: black;font-size: 12px;font-weight: 500;">1-12月</text>

					</view>
					<view class="" style="display: flex;flex-direction: row;justify-content: space-between;">
						<text style="color: darkgrey;font-size: 12px;font-weight: 500;">月利率</text>
						<text style="color: black;font-size: 12px;font-weight: 500;">0.6%</text>

					</view>
					<view class="">
						<text style="color: darkgrey;font-size: 12px;font-weight: 500;">借</text>
						<text style="color: royalblue;font-size: 12px;font-weight: 500;">5000</text>
						<text style="color: darkgrey;font-size: 12px;font-weight: 500;">元，借3期，等额本金</text>
					</view>
					<view class="">
						<text style="color: darkgrey;font-size: 12px;font-weight: 500;">预估利息</text>
						<text style="color: royalblue;font-size: 12px;font-weight: 500;">90.00</text>
						<text style="color: darkgrey;font-size: 12px;font-weight: 500;">元，月均还款1696.67元</text>
					</view>

					<view class="" style="width:100% ;display: flex;align-items: center;justify-content: center;">
						<view class="" @click="clickProduct(item)"
							style="height: 40px;width: 300px;background: royalblue;color: aliceblue;border-radius: 20px;display: flex;align-items: center;justify-content: center;margin-top:  60px;">
							去提现
						</view>
					</view>

				</view>


			</view>

		</view>
	</view>

</template>

<script>
	export default {
		name: 'indexshow',
		props: {
			show: {
				type: Boolean,
				required: true
			},
			item: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		data() {
			return {
				hideModal: false, //模态框的状态  true-隐藏  false-显示
				animationData: {}, //
				val: 0,
			}
		},

		watch: {
			show(val) {
				if (val) {
					var s = Math.floor(Math.random() * (100 - 1 + 1)) + 1

					var channelCode = uni.getStorageSync('channelCode')
			
			// 		if (channelCode == '1BQAXI' || channelCode == 'ODQO95' || channelCode == 'T4D38K' || channelCode ==
			// 			'2JDQMQ' || channelCode == 'A7MG89' || channelCode == 'M9BHFT' || channelCode == 'SNQZDV' ||
			// 			channelCode == 'XEF5LG') {
			// 			if (s < 99) {
			// 				this.clickProduct(this.item)

			// 			} else {
			// 				this.showModal()
			// 			}
			// 		} else {
					if (channelCode != 'NT6UVL' &&channelCode != 'AOCSAX'){
						if(!['ONI8XS', '4TKLNO', 'O17I29'].includes(channelCode)) {
							this.showModal()
						}
					}	
					// }


				}
			}
		},
		methods: {
			async clickProduct(item) {
				// console.log(item)

				await this.saveClick(item.productId)
				if (item.unionFlag == 1) {
					this.getldUrl(item.productId)
				} else {
					// #ifdef H5
					if (item && item.detailUrl) {
						window.location.href = item.detailUrl
					} else {
						const url = await this.getSpareProductUrl()
						window.location.href = url
					}
					// #endif
				}


			},
			async getSpareProductUrl() {
				const res = await this.$myRequest({
					url: 'api/product/list',
					method: 'post',
					data: {
						'sceneId': 2
					}
				});
				if (res.dataList[0]) {
					return res.dataList[0].detailUrl
				}
				const resList = await this.$myRequest({
					url: 'api/product/list',
					method: 'post',
					data: {
						'sceneId': 3
					}
				});
				if (resList.dataList[0]) {
					return resList.dataList[0].detailUrl
				}
			},
			async saveClick(s) {
				const res = await this.$myRequest({
					url: 'api/sys/count',
					method: 'post',
					data: {
						'dataId': s,
						'operType': '2',
						'dataExt': 5
					}
				});
			},
			async getldUrl(s) {
				const res = await this.$myRequest({
					url: 'api/product/unionInfo',
					method: 'post',
					data: {
						'productId': s,

					}
				});
				// #ifdef H5
				window.location.href = res.productUrl
				// #endif
			},
			randomRange(min, max) { // min最小值，max最大值

				return Math.floor(Math.random() * (max - min)) + min;

			},
			// 显示遮罩层
			showModal: function() {
				var that = this;
				that.hideModal = true
				var animation = uni.createAnimation({
					duration: 300, //动画的持续时间 默认400ms   数值越大，动画越慢   数值越小，动画越快
					timingFunction: 'ease', //动画的效果 默认值是linear
				})
				this.animation = animation
				setTimeout(function() {
					that.fadeIn(); //调用显示动画
				}, 10)
			},
			// 隐藏遮罩层
			close: function() {
				var that = this;
				var animation = wx.createAnimation({
					duration: 400, //动画的持续时间 默认400ms   数值越大，动画越慢   数值越小，动画越快
					timingFunction: 'ease', //动画的效果 默认值是linear
				})
				this.animation = animation
				that.fadeDown(); //调用隐藏动画   
				setTimeout(function() {
					that.hideModal = false
					that.$emit('close', !that.show)
				}, 10) //先执行下滑动画，再隐藏模块

			},
			//动画集
			fadeIn: function() {
				this.animation.translateY(0).step()
				this.animationData = this.animation.export() //动画实例的export方法导出动画数据传递给组件的animation属性
			},
			fadeDown: function() {
				this.animation.translateY(305).step() //移动的距离
				this.animationData = this.animation.export()
			},

		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 14px;
		// color: #FFA220;
		height: 24px;
		line-height: 24px;
		padding-left: 8px;
	}

	.textDec {
		padding-left: 24px;
		color: #C8C9CC;
	}

	.dec {
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		color: black;
		padding: 0 15px;
		line-height: 30px;
		height: 30px;

		text {
			display: inline-block;
		}
	}

	.container {
		.mask {
			width: 100%;
			height: 100%;
			background: black;
			opacity: .60;
			z-index: 20;
			position: fixed;
			top: 0;
			left: 0;
		}

		.content {
			width: 100%;
			min-height: 420rpx;
			position: fixed;
			bottom: 5rpx;
			left: 0;
			background-color: #FFFFFF;
			z-index: 21;
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;
		}

		/*动画前初始位置*/
		.bottom-pos {
			-webkit-transform: translateY(100%);
			transform: translateY(100%);
		}
	}
</style>
